<template>
    <div class="detail" v-loading="pager.loading">
        <div class="flex row m-b-10 m-l-10">
            <div class="m-r-20">
                <el-checkbox v-if="type == 'multiple'" v-model="selectAll"
                    >全选</el-checkbox
                >
            </div>
            <div class="flex">
                <div class="m-r-10">商品搜索</div>
                <el-input
                    size="small"
                    placeholder="请输入商品名称"
                    style="width: 220px"
                    v-model="name"
                    @keyup.enter.native="getList(1)"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="getList(1)"
                    ></el-button>
                </el-input>
            </div>
        </div>
        <el-table
            ref="table"
            :data="pager.lists"
            style="width: 100%"
            height="370px"
            size="mini"
            row-key="id"
        >
            <el-table-column width="45" v-if="type == 'single'">
                <template slot-scope="{ row }">
                    <el-checkbox
                        :value="selectItem(row)"
                        @change="handleSelect($event, row)"
                    ></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column v-if="type == 'multiple'" width="45">
                <template slot-scope="{ row }">
                    <el-checkbox
                        :value="selectItem(row)"
                        @change="handleSelect($event, row)"
                    ></el-checkbox>
                </template>
            </el-table-column>

            <el-table-column label="商品信息" min-width="180">
                <template slot-scope="scope">
                    <div class="flex">
                        <el-image
                            class="flex-none"
                            style="width: 48px; height: 48px"
                            :src="scope.row.image"
                            fit="cover"
                        />
                        <div class="goods-info m-l-8">
                            <div class="line-2">{{ scope.row.name }}</div>
                            <div>
                                <el-tag
                                    v-if="scope.row.spec_type == 2"
                                    size="mini"
                                    >多规格</el-tag
                                >
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="price" label="价格" width="200">
            </el-table-column>
            <el-table-column prop="total_stock" label="库存" width="80">
            </el-table-column>
        </el-table>
        <div class="flex row-right m-t-20">
            <ls-pagination v-model="pager" @change="getList()" />
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue, Watch } from 'vue-property-decorator'
import LsPagination from '@/components/ls-pagination.vue'
import { RequestPaging, throttle } from '@/utils/util'
import { apiGoodsCommonLists } from '@/api/goods'
@Component({
    components: {
        LsPagination
    }
})
export default class Detail extends Vue {
    @Inject('visible') visible!: any
    $refs!: { table: any }
    @Prop() value!: any
    @Prop() goods!: any
    @Prop({ default: 'single' }) type!: 'multiple' | 'single'
    @Prop() limit!: number
    @Prop({ default: false }) isSpec!: boolean
    @Prop({ default: () => { } }) params!: Record<any, any>
	// 是否展示虚拟商品
	@Prop({ default: false }) showVirtualGoods?: boolean
    name = ''
    pager = new RequestPaging()
    selectedObj: any = {}

    @Watch('visible', { deep: true, immediate: true })
    visibleChange(val: any) {
        if (val.val) {
            this.getList()
        }
    }
    get selectData() {
        return this.value
    }
    set selectData(val) {
        this.$emit('input', val)
    }

    get selectItem() {
        return (row: any) => {
            if (this.type == 'single') {
                return this.selectData.id == row.id
            }
            return this.selectData.some((item: any) => item.id == row.id)
        }
    }
    get selectAll() {
        const {
            pager: { lists }
        } = this
        const ids: any[] = this.selectData.map((item: any) => item.id)
        if (!lists.length) {
            return false
        }
        return lists.every(item => ids.includes(item.id))
    }

    set selectAll(val) {
        const {
            pager: { lists }
        } = this
        if (val) {
            for (let i = 0; i < lists.length; i++) {
                const item = lists[i]
                const ids: any[] = this.selectData.map((item: any) => item.id)
                if (!ids.includes(item.id)) {
                    if (this.checkLength()) {
                        return
                    }
                    this.selectData.push(item)
                }
            }
        } else {
            lists.forEach(row => {
                this.setSelectData(row)
            })
        }
    }
    getList(page?: number): void {
		// showVirtualGoods为true时，type=1，此时展示虚拟商品
		let type = undefined
		if(this.showVirtualGoods) {
			type = 0
		}
		
        page && (this.pager.page = page)
        this.pager
            .request({
                callback: apiGoodsCommonLists,
                params: {
                    name: this.name,
                    is_spec: this.isSpec,
                    ...this.params,
					 type: type, // 为了显示出虚拟商品。
                }
            })
            .then((res: any) => {})
    }
    handleSelect($event: boolean, row: any) {
        if (this.type == 'single') {
            if ($event) {
                this.selectData = row
            } else {
                this.selectData = {}
            }
        } else if ($event) {
            if (this.checkLength()) {
                return
            }
            this.selectData.push(row)
        } else {
            this.setSelectData(row)
        }
    }

    setSelectData(row: any) {
        const index = this.selectData.findIndex(
            (item: any) => item.id == row.id
        )
        if (index != -1) {
            this.selectData.splice(index, 1)
        }
    }
    checkLength() {
        if (this.selectData.length >= this.limit) {
            this.$message({
                message: `选多选择${this.limit}件商品`,
                type: 'warning'
            })
            return true
        }
        return false
    }
}
</script>

<style scoped lang="scss"></style>
